<template>
	<!-- 用户 我的界面 -->
	<view>
		<nav-bar title="个人中心">
			<view slot="left" v-if="user.userId==null" class="nav_bar_left" @click="setting">登录</view>
			<view slot="right" class="search_box"></view>
			<view v-if="hasLogin" slot="right" class="nav_bar_right" @click="bindLogout">退出</view>
		</nav-bar>
		<view class="header">
			<view class="user_img">
				<image v-if="user==''" src="../../static/user.png"></image>
				<image v-else :src="user.imgUrl" @click="changeHead"></image>
			</view>
			<view class="user_name">
				<!-- <text>不爱讲道理</text> -->
				<text>{{user.userName}}</text>
			</view>
			<view class="header_left">
				<image src="../../static/youhuiquan.jpg"></image>
				<text>优惠券</text>
			</view>
			<view class="header_right">
				<image src="../../static/hongbao.jpg"></image>
				<text>红包</text>
			</view>
		</view>
		<view class="account">
			<view>
				<view><text>余额</text></view>
				<view v-if="user==''"><text class="red">0.00</text></view>
				<view v-else><text class="red">{{user.account}}</text></view>

			</view>
			<view>
				<view><text>我的收益</text></view>
				<view><text class="red">0</text></view>
			</view>
			<view>
				<view><text>悦客豆</text></view>
				<view><text class="red">0分</text></view>
			</view>
		</view>
		<view class="content">
			<view class="camp_order">
				<view class="camp_order_top">
					<view class="camp_order_left">
						<text class="icon">&#xe774;</text>
						<text>营地订单</text>
					</view>
					<view class="camp_order_right" @click="gotocamporder('pages/camp_order/camp_order')">
						<text>查看全部订单</text>
						<text class="icon">&#xe65b;</text>
					</view>
				</view>
				<view class="order_detail">
					<view>
						<view><text class="icon">&#xebf7;
								<!-- <text class="num">①</text> --></text></view>
						<view><text>待付款</text></view>
					</view>
					<view>
						<view><text class="icon">&#xebf8;</text></view>
						<view><text>待付款</text></view>
					</view>
					<view>
						<view><text class="icon">&#xec24;</text></view>
						<view><text>已完成</text></view>
					</view>
				</view>
			</view>
			<view class="functions">
				<view class="functions_top">
					<view class="functions_left">
						<text class="icon">&#xe6ef;</text>
						<text>常用功能</text>
					</view>
					<view class="functions_right" @click="showOrHide" v-if="showhide">
						<text>收起</text>
						<text class="icon">&#xe658;</text>
					</view>
					<view class="functions_right" @click="showOrHide" v-else>
						<text>收起</text>
						<text class="icon">&#xe65a;</text>
					</view>
				</view>
				<view class="functions_content" v-if="showhide">
					<view class="functions_content_detail">
						<view class="con">
							<view><text class="icon blue">&#xe74b;</text></view>
							<view><text>我的好友</text></view>
						</view>
						<view class="con">
							<view><text class="icon yellow">&#xebf9;</text></view>
							<view><text>耍耍客</text></view>
						</view>
						<view class="con" @click="gotocamporder('pages/liu/jsCollectionList/jsCollectionList')">
							<view><text class="icon red">&#xe8ab;</text></view>
							<view><text>我的收藏</text></view>
						</view>
						<view class="con" @click="gotocamporder('pages/food/foodCollectionList/foodCollectionList')">
							<view><text class="icon red">&#xe8ab;</text></view>
							<view><text>美食收藏</text></view>
						</view>
						<view class="con">
							<view><text class="icon yellow">&#xebf7;</text></view>
							<view><text>我的分销</text></view>
						</view>
						<view class="con">
							<view><text class="icon green">&#xe75f;</text></view>
							<view><text>我要推广</text></view>
						</view>
						<view class="con" @click="gotocamporder('pages/liu/productOrderList/productOrderList')">
							<view><text class="icon blue">&#xec5b;</text></view>
							<view><text>集市订单</text></view>
						</view>
						<view class="con" @click="gotocamporder('pages/activity/activeOrder/activeOrder')">
							<view><text class="icon blue">&#xec5b;</text></view>
							<view><text>活动订单</text></view>
						</view>
						<view class="con" @click="gotocamporder('pages/food/food_order/foodOrder')">
							<view><text class="icon blue">&#xec5b;</text></view>
							<view><text>美食订单</text></view>
						</view>
						<view class="con">
							<view><text class="icon yellow">&#xe8bb;</text></view>
							<view><text>豆豆商城</text></view>
						</view>
						<view class="con">
							<view><text class="icon green">&#xec27;</text></view>
							<view><text>领券中心</text></view>
						</view>
						<view class="con">
							<view><text class="icon blue">&#xe8be;</text></view>
							<view><text>我的消息</text></view>
						</view>
						<view class="con">
							<view><text class="icon red">&#xec2a;</text></view>
							<view><text>联系客服</text></view>
						</view>

					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showhide: true,
				user: '',
				//判断是否登录
				hasLogin: false
			}
		},
		onLoad() {
			this.getUser();
		},
		onShow() {
			this.getUser()
		},
		methods: {
			//获取用户登录数据
			getUser() {
				var islo = false;
				//同步获取user
				const value = uni.getStorageSync("user");
				console.log(value);
				if(value==''){
					return;
				}
				var tel = value.tel;
				var password = value.password;
				this.selectUser(tel, password);
				
				const value1 = uni.getStorageSync("user");
				if (value1 != '') {
					islo = true;
				}

				this.user = value1;
				this.hasLogin = islo;
			},
			//刷新
			selectUser(tel, password) {
				uni.request({
					url: this.webUrl + 'user/login',
					data: {
						'userName': tel,
						'password': password
					},
					success: (res) => {
						uni.setStorageSync('user', res.data.obj)
					}
				});
			},
			setting() {
				uni.navigateTo({
					url: "/pages/user/login/login"
				})
			},
			showOrHide() {
				this.showhide = !this.showhide;
			},
			//跳转到订单界面
			gotocamporder(path) {
				uni.navigateTo({
					url: "/" + path
				})
			},
			//退出
			bindLogout() {
				uni.setStorage({
					key: 'user',
					data: ''
				})
				uni.reLaunch({
					url: "/pages/user/user"
				})
			},
			//更改头像
			changeHead(){
				var _this=this;
				//选取头像的方法
				uni.chooseImage({
					count:1,
					sizeType: ['original', 'compressed'],
					success: function (res) {
							var url=res.tempFilePaths[0];
							console.log(res.tempFiles[0].size);
							if(res.tempFiles[0].size>1048575){
								setTimeout(function(){
									uni.showToast({
										title:"图片过大,请小于1M"
									})
								},1500)
							}
							uni.showModal({
							    title: '提示',
							    content: '确定更换头像?',
							    success: function (res) {
							        if (res.confirm) {
										//上传到java后端
										uni.uploadFile({
											url:_this.webUrl+"uploadImgs", 
											filePath:url,
											name:"file",
											success: (uploadFileRes) => {
												uni.request({
													url:_this.webUrl+"updateUserImgUrl",
													data:{
														userId:_this.user.userId,
														imgUrl:uploadFileRes.data
													},
													success: () => {
														uni.showToast({
															title:"头像已更换"
														})
														_this.user.imgUrl=uploadFileRes.data;
													}
												})
											}
										});
							        } else if (res.cancel) {
							            console.log('用户点击取消');
							        }
							    }
							});
					}
				})
			}


		}
	}
</script>

<style lang="scss">
	.nav_bar_left {
		margin-left: 20rpx;
		font-size: 28rpx;
		color: #0FAEFF;
	}

	.nav_bar_right {
		margin-right: 20rpx;
		font-size: 28rpx;
		color: #0FAEFF;
	}

	.content {
		width: 750rpx;
		min-height: 700rpx;
		background-color: #DCDDDD;
		font-size: 30rpx;
		padding-top: 20rpx;

		.functions {
			width: 90%;
			// height: 500rpx;
			margin: 30rpx auto;
			background-color: white;
			border-radius: 20rpx;
			padding-top: 20rpx;
			box-shadow: 10rpx 10rpx 5rpx #888888;
			font-size: 30rpx;

			.functions_top {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				height: 100rpx;

				.functions_left {
					margin-left: 20rpx;

					.icon {
						color: red;
						margin-right: 5rpx;
					}
				}

				.functions_right {
					margin-right: 20rpx;
					color: #C0C0C0;
				}
			}

			.functions_content {
				.functions_content_detail {
					// margin-top: 40rpx;
					text-align: center;
					display: flex;
					flex-wrap: wrap;
					font-size: 28rpx;

					.con {
						width: 25%;
						height: 140rpx;

						.icon {
							font-size: 50rpx;
						}

						.blue {
							color: #4CA2FF;
						}

						.yellow {
							color: yellow;
						}

						.red {
							color: #FF3333;
						}

						.green {
							color: #1AAD19;
						}
					}
				}

			}
		}

		.camp_order {
			width: 90%;
			height: 200rpx;
			background-color: white;
			margin: 0 auto;
			border-radius: 20rpx;
			padding-top: 20rpx;
			box-shadow: 10rpx 10rpx 5rpx #888888;

			.camp_order_top {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.camp_order_left {
					margin-left: 20rpx;

					.icon {
						color: red;
						margin-right: 5rpx;
					}
				}

				.camp_order_right {
					margin-right: 20rpx;
					color: #C0C0C0;
				}
			}

			.order_detail {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				text-align: center;
				padding-top: 50rpx;

				.icon {
					font-size: 30rpx;
					// .num{
					// 	line-height: 10rpx;
					// 	margin-left: 15rpx;
					// }
				}

			}
		}
	}

	.search_box {
		width: 35upx;
		height: 35upx;
		background-image: url('/static/setting.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin-right: 15upx;
	}

	.header {
		width: 750rpx;
		height: 300rpx;
		background: olive linear-gradient(to top, rgba(6, 181, 255, 0.0), rgba(255, 252, 253, 0.5));
		transition: background-color .5s;
		position: relative;

		.user_img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 60rpx;
			margin: 0 auto;
			position: relative;
			top: 30rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.user_name {
			width: 100%;
			height: 30rpx;
			font-size: 30rpx;
			position: relative;
			top: 50rpx;
			text-align: center;
		}

		.header_left {
			width: 200rpx;
			height: 60rpx;
			border-radius: 10rpx;
			position: relative;
			top: 80rpx;
			left: 100rpx;
			font-size: 30rpx;
			opacity: 0.7;
			background-color: white;
			text-align: center;
			line-height: 60rpx;

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.header_right {
			width: 200rpx;
			height: 60rpx;
			border-radius: 10rpx;
			position: relative;
			top: 20rpx;
			left: 440rpx;
			opacity: 0.7;
			background-color: white;
			text-align: center;
			line-height: 60rpx;
			font-size: 30rpx;

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}

	.header:hover {
		background-color: #4CA2FF;
	}

	.account {
		width: 750rpx;
		height: 120rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		font-size: 30rpx;
		text-align: center;
		padding-top: 20rpx;

		.red {
			color: red;
			padding-top: 5rpx;
		}
	}
</style>
